<template>
	<view class="content">
		 <Tabs
			:TabList="TabList"
			:currentTab="current"
			@tabs="tabsChange"
		    >
			<TabPane>
				<view class="newOrder" v-if="TabList">
					<view class="body">
						<view class="title">
							<view class="left">
								<image class="imgs" src="../../static/img/time.png" mode=""></image>
								2021-03-01 15:23
							</view>
							<view class="right">
								<view>
									新订单
								</view>
								يېڭى زاكاز تالونى
							</view>
						</view>
						<view class="container">
							<view class="left">
								<view>
									联系人：
								</view>
								ئالاقىلاشقۇچى
							</view>
							<view class="right">
								<view>
									艾先生
								</view>
							</view>
						</view>
						<view class="adress">
							<view class="container">
								<view class="left">
									<view>
										配送地址：
									</view>
									يەتكۈزۈپ بېرىش ئادرېسى
								</view>
								<view class="right">
									<image class="icon" src="../../static/img/address.png" mode=""></image>
								</view>
							</view>
							<view>
								浙江省杭州市下城区兴业路金通数字科创园8号楼
								209室
							</view>
						</view>
						<view class="container">
							<view class="left">
								<view>
									油料型号：
								</view>
								ماي تۇڭى تىپى
							</view>
							<view class="right">
								<view>
									型号
								</view>
							</view>
						</view>
						<view class="container">
							<view class="left">
								<view>
									数量：
								</view>
								ماي تۇڭى سانى
							</view>
							<view class="right">
								<view>
									2L
								</view>
							</view>
						</view>
						<view class="container">
							<view class="left">
								<view>
									单价：
								</view>
								يەككە
							</view>
							<view class="right">
								<view>
									￥20.00/L
								</view>
							</view>
						</view>
						<view class="container last">
							<view class="left">
								<view>
									开票信息：
								</view>
								تالون كېسىش ئۇچۇر
							</view>
							<view class="right">
								<view>
								>
								</view>
							</view>
						</view>
						<view class="container last submit">
							<view class="left">
								<view>
									总计：￥666.66
								</view>
								جەمئىي
							</view>
							<view class="right">
								<view class="addorder">
									<view>
										去加油
									</view>
										بېرىپ ماي قاچىلاش
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="noOrder" v-else>
					<image class="noimgs" src="../../static/img/nooder.png" mode=""></image>
				</view>
			</TabPane>
			<TabPane>
				<view class="newOrder"  v-if="TabList">
					<view class="body">
						<view class="title">
							<view class="left">
								<image class="imgs" src="../../static/img/time.png" mode=""></image>
								2021-03-01 15:23
							</view>
							<view class="right">
								<view>
									正在进行
								</view>
								ئاللىقاچان تاپشۇرغان
							</view>
						</view>
						<view class="container">
							<view class="left">
								<view>
									联系人：
								</view>
								ئالاقىلاشقۇچى
							</view>
							<view class="right">
								<view>
									艾先生
								</view>
							</view>
						</view>
						<view class="adress">
							<view class="container">
								<view class="left">
									<view>
										配送地址：
									</view>
									يەتكۈزۈپ بېرىش ئادرېسى
								</view>
								<view class="right">
									<image class="icon" src="../../static/img/address.png" mode=""></image>
								</view>
							</view>
							<view>
								浙江省杭州市下城区兴业路金通数字科创园8号楼
								209室
							</view>
						</view>
						<view class="container">
							<view class="left">
								<view>
									油料型号：
								</view>
								ماي تۇڭى تىپى
							</view>
							<view class="right">
								<view>
									型号
								</view>
							</view>
						</view>
						<view class="container">
							<view class="left">
								<view>
									数量：
								</view>
								ماي تۇڭى سانى
							</view>
							<view class="right">
								<view>
									2L
								</view>
							</view>
						</view>
						<view class="container">
							<view class="left">
								<view>
									单价：
								</view>
								يەككە
							</view>
							<view class="right">
								<view>
									￥20.00/L
								</view>
							</view>
						</view>
						<view class="container last">
							<view class="left">
								<view>
									开票邮箱：
								</view>
								تالون كېسىش پوچتا ساندۇقى
							</view>
							<view class="right">
								<view>
									105187374@qq.com
								</view>
							</view>
						</view>
						<view class="container last submit">
							<view class="left">
								<view>
									总计：￥666.66
								</view>
								جەمئىي
							</view>
							<view class="right">
								<view class="addorder">
									<view>
										已完成
									</view>
									تاماملاندى
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="noOrder" v-else>
					<image class="noimgs" src="../../static/img/nooder.png" mode=""></image>
				</view>
			</TabPane>
			<TabPane>
				<view class="newOrder" v-if="TabList">
					<view class="body">
						<view class="title">
							<view class="left">
								<image class="imgs" src="../../static/img/time.png" mode=""></image>
								2021-03-01 15:23
							</view>
							<view class="over">
								<view>
									已完成
								</view>
								تاماملاندى
							</view>
						</view>
						<view class="container">
							<view class="left">
								<view>
									联系人：
								</view>
								ئالاقىلاشقۇچى
							</view>
							<view class="right">
								<view>
									艾先生
								</view>
							</view>
						</view>
						<view class="adress">
							<view class="container">
								<view class="left">
									<view>
										配送地址：
									</view>
									يەتكۈزۈپ بېرىش ئادرېسى
								</view>
								<view class="right">
									<image class="icon" src="../../static/img/address.png" mode=""></image>
								</view>
							</view>
							<view>
								浙江省杭州市下城区兴业路金通数字科创园8号楼
								209室
							</view>
						</view>
						<view class="container">
							<view class="left">
								<view>
									油料型号：
								</view>
								ماي تۇڭى تىپى
							</view>
							<view class="right">
								<view>
									型号
								</view>
							</view>
						</view>
						<view class="container">
							<view class="left">
								<view>
									数量：
								</view>
								ماي تۇڭى سانى
							</view>
							<view class="right">
								<view>
									2L
								</view>
							</view>
						</view>
						<view class="container">
							<view class="left">
								<view>
									单价：
								</view>
								يەككە
							</view>
							<view class="right">
								<view>
									￥20.00/L
								</view>
							</view>
						</view>
						<view class="container last">
							<view class="left">
								<view>
									开票邮箱：
								</view>
								تالون كېسىش پوچتا ساندۇقى
							</view>
							<view class="right">
								<view>
									105187374@qq.com
								</view>
							</view>
						</view>
						<view class="container last submit">
							<view class="left test">
								<view>
									总计：￥666.66
								</view>
								جەمئىي
							</view>
							
						</view>
					</view>
				</view>
				<view class="noOrder" v-else>
					<image class="noimgs" src="../../static/img/nooder.png" mode=""></image>
				</view>
			</TabPane>
			
		  </Tabs>
	</view>
</template>

<script>
	import app from '@/util/api.js'
	import Tabs from '../../components/tabs/tabs.vue'
	import TabPane from '../../components/tabs/tabPane.vue'
	export default {
		components:{
			Tabs,
			TabPane
		 },
		data() {
			return {
				current: 0,
				TabList:[
					{title:'新订单', desc:'تاماملاندى'},
					{title:'进行中', desc:'ئېلىپ بېرىلىۋاتىدۇ'},
					{title:'已完成', desc:'تاماملاندى'},
				],
				page:1,
				limit:10
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			tabsChange(index){
				this.current = index
				this.getList()
			},
			getList(){
				let data ={
					type:this.current+1,
					page:this.page,
					limit:this.limit,
					token:'bfdab91143a15e45ca1f5a78a1bfaa816fa59b4d'
				}
				app.request('/order/storeOrder',data).then(res=>{
					console.log(res)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.noOrder{
		text-align: center;
		padding: 50rpx 306rpx;
		.noimgs{
			width: 138rpx;
			height: 147rpx;
		}
	}
.newOrder{
	padding: 30rpx 20rpx;
	
	.body{
		background-color: #fff;
		padding: 22rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 30rpx;
		.icon{
			width: 30rpx;
			height: 36rpx;
		}
		.imgs{
			width: 27rpx;
			height: 27rpx;
			margin-right: 10rpx;
		}
		
		.title{
			border-bottom: 1rpx solid #EEEEEE;
			display: flex;
			padding: 35rpx 0;
			.left,.right{
				width: 50%;
			}
			.right{
				text-align: right;
				color: #FFC03C;
				
			}
		}
		.adress{
			padding: 35rpx 0;
			border-bottom: 1rpx solid #EEEEEE;
			.container{
				border-bottom: none;
			}
		}
		.last{
			border-bottom: none!important;
		}
		.submit{
			.left{
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #E73333;
				line-height: 30rpx;
			}
			.right{
				text-align: right;
				.addorder{
					padding: 10rpx;
					width: 90%;
					height: 84rpx;
					background: #FFFFFF;
					border: 1px solid #BFBFBF;
					border-radius: 10rpx;
					text-align: center;
				}
			}
			
		}
		.container{
			padding: 35rpx 0;
			border-bottom: 1rpx solid #EEEEEE;
			display: flex;
			.left,.right{
				width: 50%;
			}
			.right{
				text-align: right;
			}
		}
		.over{
			width: 50%;
			text-align: right;
		}
		.test{
			color: #333333!important;
		}
	}
}
	
</style>

